<template>
	<div id="payable" style="height: 400px;width: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';
import { amountOrderCount } from '@/api/countData'
export default {
	data() {
		return {
		}
	},
	mounted() {
		amountOrderCount().then((res) => {
			(function () {
				var chartDom = document.getElementById('payable');
				var myChart = echarts.init(chartDom);
				var option;
				option = {

					title: {
						text: '应还金额'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					// legend: {
					// 	data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
					// },
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: res[0].date.split(' ')
						}
					],
					yAxis: [
						{
							type: 'value',
							name:'单位（元）'
						}
					],
					series: [
						{
							type: 'line',
							stack: 'Total',
							areaStyle: {},
							emphasis: {
								focus: 'series'
							},
							data: res[1].o_1.split(' ')
						},
					]
				};
				option && myChart.setOption(option);
			})();
		});
	},
	methods: {
	}
}
</script>

<style lang="scss" scoped>

</style>
